import React from 'react';
import {Center, ChevronRightIcon, HStack, Icon, Image, Pressable, Text} from "@gluestack-ui/themed";
import {ChooseDateProps} from "./type";

const ChooseDate = (props: ChooseDateProps) => {
    const {
        options,
        onChange
    } = props;

    return (
        <>
            <HStack
                alignItems={"center"}
                space={"xs"}
            >
                <Image width={20} height={20} source={require('@/theme/assets/images/icon/tips.png')}
                       alt={"提示"}></Image>
                <Text size={"sm"} color={"$textLight500"}>选择后将展示该时间段内的所有推广数据</Text>
            </HStack>
            <HStack
                flexWrap={"wrap"}
                space={"md"}
                mt={"$5"}
            >
                {options.map((item, index) => (
                    <Pressable
                        w={'30%'}
                        borderWidth={0.5}
                        borderColor={"$borderLight500"}
                        borderRadius={"$sm"}
                        key={index}
                        onPress={() => onChange(item, index)}
                    >
                        <Center
                            h={"$10"}
                        >
                            <Text size={"sm"} color={"$textLight500"}>{item.label}</Text>
                        </Center>
                    </Pressable>
                ))}
            </HStack>
            <Pressable
                borderWidth={0.5}
                borderColor={"$borderLight500"}
                borderRadius={"$sm"}
                mt={15}
                onPress={() => onChange()}
            >
                <HStack
                    alignItems={"center"}
                    justifyContent={"center"}
                    h={"$10"}
                >
                    <Text size={"sm"} color={"$textLight500"}>自定义时间</Text>
                    <Icon as={ChevronRightIcon} w="$4" h="$4" color={"$textLight500"}></Icon>
                </HStack>
            </Pressable>
        </>
    );
};

export default ChooseDate;